<template>
  <div class="flex column module-inner">
    <div class="module-title">
      <img alt="" src="/image/download-5.png">
      {{ moduleTitle }}
    </div>
    <div class="module-content flex column">
      <div class="sub-title flex-center">荣誉名称</div>
      <ul class="list flex"
          id="scrollbar-customer"
          @mouseenter="monseenter"
          @mouseleave="mouseleave">
        <el-scrollbar
          :vertical="false"
          :wrap-style="[{ 'overflow-x': 'hidden' }]"
          style="height: 100%; width: 100%"
        >
          <div class="scroll-inner" :id="moduleTitle==='国外荣誉'?'forgin':''">
            <li v-for="item in moduleData" :key="item" class="item flex-center">{{ item }}</li>
          </div>
        </el-scrollbar>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Honor',
  components: {},
  props: {
    moduleTitle: {
      default: '国外荣誉',
      type: String
    },
    moduleData: {
      default: () => ([]),
      type: Array
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.setTimer()
      this.$once('hook:beforeDestroy', () => {
        this.removeTimer()
      })
    },
    monseenter() {
      this.removeTimer()
    },
    mouseleave() {
      this.setTimer()
    },
    removeTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    setTimer() {
      this.removeTimer()
      const dom = document.querySelectorAll(
        '#scrollbar-customer .el-scrollbar__wrap'
      )[1]
      this.timer = setInterval(() => {
        // for (let dom of domList) {
        if (dom) {
          const scrollHeight = dom.scrollHeight
          const clientHeight = dom.clientHeight
          const heightDifference = scrollHeight - clientHeight
          dom.scrollTop++

          if (dom.scrollTop >= heightDifference - 1) {
            this.removeTimer()
            setTimeout(() => {
              dom.scrollTop = 0
              this.setTimer()
            }, 1000)
          }
        }
        // }

      }, 15)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.module-inner {
  height: 100%;
}

.module-content {
  flex: 230;
  background: url("/public/image/module1-title-bg.png") no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
}

.sub-title {
  @include vw(16);
  flex: 40;
  color: #00ccff;
}

.list {
  flex: 190;
  list-style: none;
  width: 100%;
  @include vw(14);

  .item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    @include vw(10);
    padding: px2vh(10);

    &:nth-of-type(2n) {
      background: rgb(12, 32, 62);
    }

    &:nth-of-type(2n + 1) {
      background: rgb(18, 50, 98);
    }
  }
}
</style>
